<template>
  <h4>发送短信倒计时</h4>
  <el-button 
    type="primary"             
    link
    :loading="sending"
    :disabled="countdown > 0"
    @click="sendCode(loginData.mobile)">
    {{ countdown === 0 ? '发送验证码' : `${countdown}s` }}
  </el-button>
</template>
<script lang="ts" setup>
import { useCountdown } from '@twa/hooks'
import { reactive } from 'vue';
const handleSendCode = () => {
  const params = {
    type: 'sms',
    mobile: loginData.mobile,
  }
  // 请求接口
  setTimeout(() => {
    console.log('已发送', params)
  }, 1000)
}
const { sendCode, countdown, sending } = useCountdown(60, handleSendCode)

const loginData = reactive({
  mobile: '13212345678',
})
</script>